<template>
	<view>
		
		<view class="card-swiper">
			 <u-card :border="false"  padding="15" :head-border-bottom="false" :foot-border-top="false">
				 <view slot="head">
					  <view class="flex-row card-head-wrapper">
						    <u-avatar class="avatar" :size="70" :src="src" img-mode="scaleToFill"></u-avatar>
							<view class="head-view2">
								<view class="flex-col flex-row wraper-col">
									 <view class="text text-view">
										 <text class="pr-20">Herther</text>
										  <u-icon class="icon-photo"  name="woman" color="#1e90ff" :size="40"></u-icon>
									 </view> 
									 <text class="num-10-minutes">
										 10分钟前
									 </text>
								</view>
								<u-tag text="新发布" type="success" shape="circleLeft" bg-color="#2979ff" color="rgba(255, 255, 255, 1)" border-color="#2979ff"></u-tag>
							</view>
					 </view>
				 </view>
				<view slot="body">
					<view class="flex-row wrapper">
						<u-image :src="image" width="140rpx" height="140rpx"></u-image>
						<view style="padding-left: 20rpx; flex: 2;">
							<view class="u-line-3 text">
								好吃的华夫饼
							</view>
						</view>
					</view>
				</view>
				<view class="" slot="foot">
					<u-icon name="chat-fill" size="34" label="30评论"></u-icon>
				</view>
			</u-card>
		</view>
		<u-gap height="15" bg-color="#f8f8f8"></u-gap>
	</view>
</template>

<script>
	export default {
		name:"socialCard",
		data() {
			return {
				src:"https://herther-mall.oss-cn-shenzhen.aliyuncs.com/2021-11-20/avatar.jpg",
				image:"https://herther-mall.oss-cn-shenzhen.aliyuncs.com/2021-11-20/Snipaste_2021-11-20_18-03-54.jpg"
			};
		}
	}
</script>

<style lang="scss" scoped>
	
	.card-swiper{
		.card-head-wrapper{
			padding: 5rpx 0rpx 5rpx 2rpx;
			.avatar {
				margin-right: 24rpx;
			}
			.wraper-col {
				width: 200rpx;
				margin-right: 12rpx;
				.text-view{
					display: flex; align-items: center;
				}
				.text {
					margin-bottom: 14rpx;
					font-size: 32rpx;
					line-height: 28rpx;
				}
	
				.num-10-minutes {
					width: 112rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #57606f;
				}
			}
			// .icon-photo {
			// 	width: 40rpx;
			// 	margin-right: 378rpx;
			// }
	
			// .tag {
			// 	margin-top: 16rpx;
			// }
		}
		.head-view2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 3;
		}
		.wrapper {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
		
</style>
